<div class="row">
  <x-button (click)="open('top-start', 'top start')">top start</x-button>
  <x-button (click)="open('top-end', 'top end')">top end(default)</x-button>
  <x-button (click)="open('bottom-start', 'bottom start')">bottom start</x-button>
  <x-button (click)="open('bottom-end', 'bottom end')">bottom end</x-button>
</div>
